<template>
  <el-drawer :title="title" :visible.sync="visible" append-to-body class="drawer-container" size="800px">
    <el-form ref="form" :model="formdata" :rules="formrule" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="配置编码" prop="code">
            <el-input v-model="formdata.code" placeholder="请输入配置编码"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配置名称" prop="name">
            <el-input v-model="formdata.name" placeholder="请输入配置名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="访问站点" prop="endpoint">
            <el-input v-model="formdata.endpoint" placeholder="请输入访问站点">
              <el-select slot="prepend" v-model="formdata.proxy" style="width: 90px">
                <el-option label="http://" value="http"/>
                <el-option label="https://" value="https"/>
              </el-select>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区域" prop="region">
            <el-input v-model="formdata.region" placeholder="请输入域"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="前缀" prop="prefix">
            <el-input v-model="formdata.prefix" placeholder="请输入前缀"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自定义域名" prop="domain">
            <el-input v-model="formdata.domain" placeholder="请输入自定义域名"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="桶名称" prop="bucket">
            <el-input v-model="formdata.bucket" placeholder="请输入桶名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="访问用户" prop="access">
            <el-input v-model="formdata.access" placeholder="请输入访问用户"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="访问密钥" prop="secret">
            <el-input v-model="formdata.secret" type="password" placeholder="请输入访问密钥" show-password/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="桶权限类型" prop="policy">
            <el-radio-group v-model="formdata.policy">
              <el-radio v-for="item in localDict.oss_policy" :label="item.value"> {{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formdata.status">
              <el-radio v-for="item in localDict.config_status" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否默认配置" prop="defaulted">
            <el-switch v-model="formdata.defaulted" active-text="是" inactive-text="否"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="序号" prop="sort">
            <el-input-number v-model="formdata.sort" style="width: 100%"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formdata.remark" placeholder="请输入内容" type="textarea"/>
      </el-form-item>
    </el-form>
    <div class="drawer-footer">
      <el-button type="primary" :loading="submitting" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>

import {getInfo, save} from "@/api/base";
import {getStaticData} from "@/api/common";

export default {
  name: "OssConfigModel",
  components: {},
  data() {
    return {
      title: '',
      visible: false,
      baseUrl: '/oss/config/',
      formdata: {},
      formrule: {
        code: [
          {required: true, message: "配置编码不能为空", trigger: "blur"},
          {pattern: /^\w{2,30}$/, message: '配置编码只能包含数字、字母、下划线,长度在2-30个字符', trigger: 'blur'},
        ],
        name: [
          {required: true, message: "配置名称不能为空", trigger: "blur"},
        ],
        access: [
          {required: true, message: "登陆账号不能为空", trigger: "blur"},
          {min: 2, max: 200, message: "登陆账号长度必须介于 2 和 100 之间", trigger: "blur",},
        ],
        secret: [
          {required: true, message: "登陆密码不能为空", trigger: "blur"},
          {min: 2, max: 100, message: "登陆密码长度必须介于 2 和 100 之间", trigger: "blur",},
        ],
        bucket: [
          {required: true, message: "存储桶名称不能为空", trigger: "blur"},
          {min: 2, max: 100, message: "存储桶名称长度必须介于 2 和 100 之间", trigger: "blur",},
        ],
        endpoint: [
          {required: true, message: "访问站点不能为空", trigger: "blur"},
          {min: 2, max: 100, message: "访问站点长度必须介于 2 和 100 之间", trigger: "blur",},
        ],
        accessPolicy: [
          {required: true, message: "accessPolicy不能为空", trigger: "blur"}
        ]
      },
      localDict: {
        oss_policy: [],
        config_status: [],
      },
      submitting: false
    }
  },
  created() {
    this.getLocalDict();
  },
  methods: {
    add() {
      this.resetForm('form')
      this.formdata = {
        status: '00'
      }
      this.visible = true
      this.title = '新增对象存储配置'
    },
    edit(id) {
      this.resetForm('form')
      getInfo(this.baseUrl, id).then(res => {
        this.formdata = res.data
        this.visible = true
        this.title = '修改对象存储配置'
      })
    },
    async getLocalDict() {
      await getStaticData('oss-config-policy').then(res => {
        this.localDict.oss_policy = res.data
      })
      await getStaticData('system-status').then(res => {
        this.localDict.config_status = res.data
      })
    },
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitting = true
          save(this.baseUrl, this.formdata).then(() => {
            this.$modal.msgSuccess("保存成功");
            this.visible = false;
            this.resetForm('form')
            this.$emit('ok')
            this.submitting = false
          });
        }
      });
    },
    handleCancel() {
      this.visible = false
      this.resetForm('form')
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
